import Taro from '@tarojs/taro';
import { useAgentSelector, useDispatchAgent } from "@/hooks/agent";
import { useDispatchConservation } from "@/hooks/conservation";
import {
  Loading,
  Navbar,
  Button,
  Empty,
} from "@taroify/core";
import {View} from "@tarojs/components";
import {useEffect} from "react";
import {AgentItemCard, CustomTabbar} from "@/components";
import {useDispatchGlobalState} from "@/hooks/global";
import {isLogin} from "@/utils/auth";
import {useDispatchUser, useUserSelector} from "@/hooks/user";
import './index.css';

export default function Dialogue() {
  const windowInfo = Taro.getWindowInfo();
  const statusBarHeight = windowInfo?.statusBarHeight;
  const dispatchConservation = useDispatchConservation();
  const dispatchAgent = useDispatchAgent();
  const dispatchUser = useDispatchUser();
  const dispatchGlobal = useDispatchGlobalState();
  const agents = useAgentSelector((state) => state.agent.agents);
  const userDetail = useUserSelector((state) => state.user.user);
  const userStatus = useAgentSelector((state) => state.user.status); // 修正变量名冲突
  const agentStatus = useAgentSelector((state) => state.agent.status); // 修正变量名冲突
  const is_login = isLogin()

  useEffect(() => {
    if(is_login){
      dispatchUser.fetchUser()
      dispatchConservation.getConservationList();
      dispatchAgent.getAgentList();
      dispatchGlobal.changeTab('dialogue')
    }
  }, [is_login]);

  const handleAgentDiscover = async ()=>{
    await Taro.redirectTo({
      url: `/pages/tabs/discover/index`,
    });
  }

  return (
    <View style={{ height: '100vh', width: '100vw', backgroundColor: 'white'}}>
      {/* 导航栏 */}
      <Navbar
        fixed
        style={{
          paddingTop: `${(statusBarHeight || 0) + 50}rpx`,
          background: 'linear-gradient(-225deg, #2CD8D5 0%, #C5C1FF 56%, #FFBAC3 100%)',
          boxShadow: '0 2rpx 10rpx rgba(0, 0, 0, 0.1)',
        }}
      >
        <Navbar.Title style={{ fontSize: '35rpx', color: 'black', fontWeight: 'bold'}}>数字教师</Navbar.Title>
      </Navbar>

      {/* 主体内容 */}
      <View style={{
      paddingTop: `${(statusBarHeight || 0) + 150}rpx`,
      width: '100%',
      height: `calc(100% - ${(statusBarHeight || 0) + 250}rpx)`
      }}
      >
        {is_login ? <View style={{overflow: 'auto', display: 'flex', flexDirection: 'column'}}>
          {agents?.items.map((item) => (
            <AgentItemCard agent={item} key={item.uuid} />
          ))}
          {userDetail?.add_agents.map((item) => (
            <AgentItemCard agent={item} key={item.uuid} />
          ))}
          <View style={{width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
            {agentStatus === 'loading' && userStatus === 'loading' && <Loading>加载中...</Loading>}
          </View>
          {(agents?.items.length === 0 && userDetail?.add_agents.length === 0) &&
          <Empty>
            <Empty.Image />
            <Empty.Description>您还未添加智能教师</Empty.Description>
            <Button
              shape='round'
              onClick={handleAgentDiscover}
              style={{
                marginTop: '40rpx',
                width: '160px * 2',
                height: '40px * 2',
                color: '#fff',
                background: 'linear-gradient(135deg, #6a11cb, #2575fc)',
                boxShadow: '0 4rpx 10rpx rgba(0, 123, 255, 0.3)',
              }}
            >
              添加更多智能教师
            </Button>
          </Empty>}
        </View>:
        <View style={{display: "flex", width: '100%', justifyContent: 'center'}}>
          <Empty>
            <Empty.Image />
            <Empty.Description>暂无智能教师</Empty.Description>
            <Button
              shape='round'
              style={{
                marginTop: '100rpx',
                background: 'linear-gradient(135deg, #6a11cb, #2575fc)',
                color: '#fff',
                borderRadius: '50rpx',
                padding: '20rpx 60rpx',
                boxShadow: '0 4rpx 10rpx rgba(0, 123, 255, 0.3)',
              }}
              onClick={() => Taro.redirectTo({
                url: `/pages/auth/WxLogin/index`,
              })}
            >前去登录，开启完整体验</Button>
          </Empty>
        </View>}
      </View>
      <CustomTabbar />
    </View>
  );
}
